<template>
    <div v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="banner in banners">
          <img :src="banner">
        </div>
      </div>
      <div class="swiper-pagination swiper-pagination-bullets"></div>
    </div>
  </template>
  
  <script>
    export default {
      data () {
        return {
          banners: [ '///upload.jianshu.io/users/upload_avatars/6343101/fa62d315-75c0-42f0-99f2-dcddbe771b89?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240', '///upload.jianshu.io/collections/images/4/sy_20091020135145113016.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240/format/webp', '///upload.jianshu.io/collections/images/14/6249340_194140034135_2.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240/format/webp' ],
          swiperOption: {
            autoplay: 5000,
            initialSlide: 1,
            loop: true,
            pagination: '.swiper-pagination',
            onSlideChangeEnd: swiper => {
              console.log('onSlideChangeEnd', swiper.realIndex)
            }
          }
        }
      },
      mounted() {
        console.log('app init')
        setTimeout(() => {
          this.banners.push('/5.jpg')
          console.log('banners update')
        }, 3000)
        console.log(
          'This is current swiper instance object', this.mySwiper, 
          'It will slideTo banners 3')
        this.mySwiper.slideTo(3)
      }
    }
  </script>